<template>
  <view class="nursing-home-detail">
    <view class="detail-card">
      <!-- 顶部图片区域，包含名称和评分 -->
      <view class="header-image-container">
        <view class="header-image">
          <text>养老院图片</text>
        </view>
        <!-- 渐变遮罩层 -->
        <view class="image-gradient"></view>
        
        <!-- 收藏按钮 -->
        <view class="favorite-icon" :class="{ 'active': isFavorite }" @tap.stop="toggleFavorite">
          <text class="iconfont">{{ isFavorite ? '&#xe6a0;' : '&#xe6a1;' }}</text>
        </view>
        
        <!-- 养老院名称和评分 -->
        <view class="title-rating">
          <text class="name">{{ nursingHome.name }}</text>
          <view class="rating">
            <view class="stars">
              <text v-for="i in 5" :key="i" :class="{ active: i <= 5 }">★</text>
            </view>
            <text class="rating-text">5.0 (2条评价)</text>
          </view>
        </view>
      </view>
      
      <!-- 信息区域 -->
      <view class="info-sections">
        <!-- 基本信息和入住条件并排布局 -->
        <view class="info-tabs-section card-section">
          <view class="tabs-header">
            <view 
              class="tab-item" 
              :class="{ 'active': activeInfoTab === 'basic' }"
              @tap="switchInfoTab('basic')"
            >基本信息</view>
            <view 
              class="tab-item" 
              :class="{ 'active': activeInfoTab === 'admission' }"
              @tap="switchInfoTab('admission')"
            >入住条件</view>
          </view>
          
          <!-- 基本信息内容 -->
          <view class="tab-content" v-if="activeInfoTab === 'basic'">
            <view class="info-row">
              <view class="info-label">地址：</view>
              <view class="info-value">{{ nursingHome.address }}</view>
            </view>
            
            <view class="info-row">
              <view class="info-label">联系电话：</view>
              <view class="info-value">{{ nursingHome.phone }}</view>
            </view>
            
            <view class="info-row">
              <view class="info-label">接待时间：</view>
              <view class="info-value">{{ nursingHome.visitHours }}</view>
            </view>
            
            <view class="info-row">
              <view class="info-label">机构类型：</view>
              <view class="info-value">{{ nursingHome.type }}</view>
            </view>
          </view>
          
          <!-- 入住条件内容 -->
          <view class="tab-content" v-if="activeInfoTab === 'admission'">
            <view 
              class="admission-item" 
              v-for="(condition, index) in nursingHome.admissionConditions" 
              :key="index"
            >
              {{ condition }}
            </view>
          </view>
        </view>
        
        <!-- 收费信息区域 -->
        <view class="fee-section card-section">
          <view class="section-title">收费信息</view>
          <view class="fee-tabs">
            <view 
              class="tab-item" 
              :class="{ 'active': activeTabType === 'food' }"
              @tap="switchFeeTab('food')"
            >伙食</view>
            <view 
              class="tab-item" 
              :class="{ 'active': activeTabType === 'rooms' }"
              @tap="switchFeeTab('rooms')"
            >房型</view>
            <view 
              class="tab-item" 
              :class="{ 'active': activeTabType === 'special' }"
              @tap="switchFeeTab('special')"
            >特殊</view>
          </view>
          
          <view class="fee-table" v-if="activeTabType === 'food'">
            <view class="table-header">
              <view class="col">伙食名</view>
              <view class="col">价格</view>
              <view class="col">周期</view>
              <view class="col">备注</view>
            </view>
            <view 
              class="table-row" 
              v-for="(item, index) in nursingHome.fees.food" 
              :key="index"
            >
              <view class="col">{{ item.name }}</view>
              <view class="col">{{ item.price }}</view>
              <view class="col">{{ item.period }}</view>
              <view class="col">{{ item.note }}</view>
            </view>
          </view>
          
          <view class="fee-table" v-if="activeTabType === 'rooms'">
            <view class="table-header">
              <view class="col">房型名称</view>
              <view class="col">价格</view>
              <view class="col">周期</view>
              <view class="col">备注</view>
            </view>
            <view 
              class="table-row" 
              v-for="(item, index) in nursingHome.fees.rooms" 
              :key="index"
            >
              <view class="col">{{ item.name }}</view>
              <view class="col">{{ item.price }}</view>
              <view class="col">{{ item.period }}</view>
              <view class="col">{{ item.note }}</view>
            </view>
          </view>
          
          <view class="fee-table" v-if="activeTabType === 'special'">
            <view class="table-header">
              <view class="col">服务名称</view>
              <view class="col">价格</view>
              <view class="col">周期</view>
              <view class="col">备注</view>
            </view>
            <view 
              class="table-row" 
              v-for="(item, index) in nursingHome.fees.special" 
              :key="index"
            >
              <view class="col">{{ item.name }}</view>
              <view class="col">{{ item.price }}</view>
              <view class="col">{{ item.period }}</view>
              <view class="col">{{ item.note }}</view>
            </view>
          </view>
        </view>
        
        <!-- 特色服务区域 -->
        <view class="services-section card-section">
          <view class="section-title">特色服务</view>
          <scroll-view class="services-scroll" scroll-x="true" show-scrollbar="false">
            <view class="services-list">
              <view class="service-item" v-for="(service, index) in nursingHome.services" :key="index">
                <view class="service-icon">图标</view>
                <view class="service-name">{{ service.name }}</view>
                <view class="service-desc">{{ service.desc }}</view>
              </view>
            </view>
          </scroll-view>
        </view>
        
        <!-- 精彩活动区域 -->
        <view class="activities-section card-section">
          <view class="section-title">精彩活动</view>
          <scroll-view class="activities-scroll" scroll-x="true" show-scrollbar="false">
            <view class="activities-list">
              <view class="activity-item" v-for="(activity, index) in nursingHome.activities" :key="index">
                <view class="activity-image">
                  <image :src="activity.image" mode="aspectFill" class="activity-img"></image>
                </view>
                <view class="activity-name">{{ activity.name }}</view>
                <view class="activity-desc">{{ activity.desc }}</view>
              </view>
            </view>
          </scroll-view>
        </view>
        
        <!-- 用户评论区域 -->
        <view class="comments-section card-section">
          <view class="section-header">
            <view class="section-title">用户评论</view>
            <view class="more-btn" @tap="viewMoreComments">更多</view>
          </view>
          
          <!-- 添加评论输入区 -->
          <view class="add-comment-section">
            <view class="rating-input">
              <text class="rating-label">评分：</text>
              <view class="stars-input">
                <text 
                  v-for="i in 5" 
                  :key="i" 
                  :class="{ 'active': i <= newComment.rating }" 
                  @tap="setRating(i)"
                >★</text>
              </view>
            </view>
            <textarea 
              class="comment-textarea" 
              v-model="newComment.content" 
              placeholder="分享您的体验和感受..." 
              maxlength="200"
            ></textarea>
            
            <!-- 添加图片上传区域 -->
            <view class="upload-section">
              <view class="image-preview-list">
                <view 
                  v-for="(image, index) in newComment.images" 
                  :key="index" 
                  class="image-preview-item"
                >
                  <image class="preview-image" :src="image" mode="aspectFill"></image>
                  <view class="delete-icon" @tap.stop="removeImage(index)">×</view>
                </view>
                
                <view 
                  class="upload-btn" 
                  v-if="newComment.images.length < 3" 
                  @tap="chooseImage"
                >
                  <text class="plus-icon">+</text>
                  <text class="upload-text">添加图片</text>
                </view>
              </view>
              <text class="upload-tips">最多可上传3张图片</text>
            </view>
            
            <view class="textarea-counter">{{ newComment.content.length }}/200</view>
            <view class="submit-btn" :class="{ 'active': isCommentValid }" @tap="submitComment">
              <text>发表评论</text>
            </view>
          </view>
          
          <view class="comment-list">
            <!-- 评论项 -->
            <view class="comment-item" v-for="(comment, index) in nursingHome.comments" :key="index">
              <view class="comment-header">
                <view class="user-info">
                  <view class="avatar"></view>
                  <text class="user-name">{{ comment.username }}</text>
                </view>
                <view class="rating">
                  <view class="stars">
                    <text v-for="i in 5" :key="i" :class="{ active: i <= comment.rating }">★</text>
                  </view>
                </view>
                <view class="expand-btn" @tap="toggleComment(index)">{{ comment.expanded ? '收起' : '展开' }}</view>
              </view>
              <view class="comment-content" :class="{ 'expanded': comment.expanded }">
                <text>{{ comment.content }}</text>
              </view>
              <view class="comment-images" v-if="comment.images && comment.images.length > 0">
                <view class="image-item" v-for="(image, index) in comment.images" :key="index" @tap="previewCommentImage(comment.images, index)">
                  <image :src="image" mode="aspectFill"></image>
                </view>
              </view>
              <view class="similar-homes" v-if="comment.expanded">
                <view class="homes-list">
                  <view class="home-item" v-for="n in 2" :key="n"></view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部操作按钮 -->
    <view class="floating-actions">
      <view class="action-btn appointment-btn" @tap="makeAppointment">
        <view class="btn-inner">
          <text class="iconfont action-icon">&#xe615;</text>
          <text class="action-text">预约参观</text>
          <view class="ripple"></view>
        </view>
      </view>
      <view class="action-btn checkin-btn" @tap="applyCheckin">
        <view class="btn-inner">
          <text class="iconfont action-icon">&#xe614;</text>
          <text class="action-text">申请入住</text>
          <view class="ripple"></view>
        </view>
      </view>
    </view>
    
    <!-- 新增入住人弹窗 -->
    <view class="add-resident-popup" v-if="showAddResident">
      <view class="popup-mask" @tap="closeAddResidentPopup"></view>
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">新增入住人</text>
          <view class="close-btn" @tap="closeAddResidentPopup">
            <text class="iconfont">&#xe60e;</text>
          </view>
        </view>
        
        <view class="popup-body">
          <view class="form-item">
            <text class="form-label required">姓名</text>
            <input class="form-input" type="text" v-model="newResident.name" placeholder="请输入入住人姓名" maxlength="10" />
          </view>
          
          <view class="form-item">
            <text class="form-label required">身份证号</text>
            <input class="form-input" type="idcard" v-model="newResident.idCard" placeholder="请输入身份证号" />
          </view>
          
          <view class="form-item">
            <text class="form-label required">出生日期</text>
            <picker class="form-picker" mode="date" :value="newResident.birthDate" @change="handleBirthDateChange">
              <view class="picker-value">
                <text v-if="newResident.birthDate">{{ newResident.birthDate }}</text>
                <text v-else>请选择出生日期</text>
              </view>
            </picker>
          </view>
          
          <view class="form-item">
            <text class="form-label required">性别</text>
            <radio-group class="form-radio-group" @change="handleGenderChange">
              <label class="radio-item">
                <radio value="男" :checked="newResident.gender === '男'" color="#2c7873" />
                <text class="radio-text">男</text>
              </label>
              <label class="radio-item">
                <radio value="女" :checked="newResident.gender === '女'" color="#2c7873" />
                <text class="radio-text">女</text>
              </label>
            </radio-group>
          </view>
          
          <view class="form-item">
            <text class="form-label required">手机号</text>
            <input class="form-input" type="number" v-model="newResident.phone" placeholder="请输入联系电话" maxlength="11" />
          </view>
          
          <view class="form-item">
            <text class="form-label required">与账号关系</text>
            <picker class="form-picker" :range="relationOptions" @change="handleRelationChange">
              <view class="picker-value">{{ newResident.relation || '请选择与账号关系' }}</view>
            </picker>
          </view>
          
          <view class="form-item">
            <text class="form-label">头像</text>
            <view class="avatar-uploader" @tap="chooseAvatar">
              <image v-if="newResident.avatar" class="avatar-image" :src="newResident.avatar" mode="aspectFill"></image>
              <view v-else class="avatar-placeholder">
                <text class="iconfont">&#xe654;</text>
                <text class="upload-text">上传头像</text>
              </view>
            </view>
          </view>
        </view>
        
        <view class="popup-footer">
          <view class="popup-btn cancel-btn" @tap="closeAddResidentPopup">
            <text>取消</text>
          </view>
          <view class="popup-btn confirm-btn" @tap="addNewResident">
            <text>确认添加</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';

// 养老院ID
const nursingHomeId = ref(null);

// 养老院详细信息
const nursingHome = reactive({
  id: 0,
  name: '阳光养老院',
  address: '北京市海淀区西三旗建材城西路88号',
  phone: '010-12345678',
  visitHours: '每日9:00-17:00',
  type: '公立养老机构',
  admissionConditions: [
    '1.年龄在60周岁以上',
    '2.无精神病史和传染病史',
    '3.能够基本自理生活',
    '4.有固定经济来源',
    '5.自愿申请入住养老院'
  ],
  fees: {
    food: [
      { name: '普通餐', price: '25元/天', period: '按月收费', note: '三餐营养均衡' },
      { name: '营养餐', price: '40元/天', period: '按月收费', note: '专业营养师配餐' }
    ],
    rooms: [
      { name: '标准单人间', price: '3000元/月', period: '按季度收费', note: '独立卫浴' },
      { name: '高级单人间', price: '5000元/月', period: '按季度收费', note: '独立卫浴，小厨房' },
      { name: '标准双人间', price: '2500元/月/人', period: '按季度收费', note: '独立卫浴' }
    ],
    special: [
      { name: '康复护理', price: '1000元/月起', period: '按需收费', note: '专业护理人员' },
      { name: '医疗服务', price: '500元/月起', period: '按需收费', note: '定期体检，健康管理' }
    ]
  },
  services: [
    { name: '24小时照护', desc: '专业护理团队全天候照顾' },
    { name: '医疗康复', desc: '专业医疗团队进行康复训练' },
    { name: '文化娱乐', desc: '丰富的文化娱乐活动' },
    { name: '心理疏导', desc: '专业心理咨询师提供服务' }
  ],
  activities: [
    { 
      name: '老年人书法比赛', 
      desc: '每月举办书法比赛，提高老年人的生活乐趣和艺术修养',
      image: 'https://via.placeholder.com/180x120?text=书法比赛' 
    },
    { 
      name: '健康讲座', 
      desc: '定期邀请专业医生进行健康知识讲座，提高老年人自我保健意识',
      image: 'https://via.placeholder.com/180x120?text=健康讲座' 
    },
    { 
      name: '集体生日会', 
      desc: '每月为当月过生日的老人举办集体生日会，增强老人的幸福感',
      image: 'https://via.placeholder.com/180x120?text=生日会' 
    },
    { 
      name: '老年智能手机课程', 
      desc: '教授老年人使用智能手机，跟上时代步伐，便于与家人联系',
      image: 'https://via.placeholder.com/180x120?text=智能手机课程' 
    },
    { 
      name: '园艺疗法', 
      desc: '通过种植花草，帮助老年人放松心情，锻炼身体',
      image: 'https://via.placeholder.com/180x120?text=园艺疗法' 
    }
  ],
  comments: [
    { 
      username: '用户A', 
      rating: 5, 
      content: '环境很好，服务人员态度也很好，老人住在这里很舒适。餐饮方面很注重营养搭配，适合老年人的口味。医疗和护理也很到位，经常有各种文化活动丰富老人的生活。设施设备很齐全，总之各方面都很满意，值得推荐。',
      expanded: false
    },
    { 
      username: '用户B', 
      rating: 5, 
      content: '这家养老院的环境和服务都非常好，护理人员专业且有耐心，我父亲在这里住了半年，身体状况有明显改善。饮食也很合理，适合老年人，经常组织各种活动让老人们互动交流，增加社交。很满意这里的一切。', 
      expanded: false
    }
  ]
});

// 是否收藏
const isFavorite = ref(false);

// 新增入住人相关
const showAddResident = ref(false);
const newResident = reactive({
  name: '',
  idCard: '',
  birthDate: '',
  gender: '男',
  phone: '',
  relation: '',
  relationCode: 0,
  avatar: ''
});

// 关系选项
const relationOptions = ['本人', '父亲', '母亲', '配偶', '其他'];
const relationCodeMap = {
  '本人': 1,
  '父亲': 2,
  '母亲': 3,
  '配偶': 4,
  '其他': 5
};

// 新评论内容
const newComment = reactive({
  content: '',
  rating: 5,
  images: []
});

// 评论是否有效（内容长度超过5个字）
const isCommentValid = computed(() => {
  return newComment.content.length >= 5;
});

// 活跃的信息标签
const activeInfoTab = ref('basic');

// 活跃的费用标签
const activeTabType = ref('food');

// 页面加载时执行
onMounted(() => {
  // 从URL获取养老院ID
  const pages = getCurrentPages();
  const page = pages[pages.length - 1];
  const options = page.$page?.options || {};
  nursingHomeId.value = options.id || 1;
  
  // 根据ID加载养老院详情
  loadNursingHomeDetail();
  
  // 检查是否已收藏
  checkFavoriteStatus();
});

// 加载养老院详情数据
const loadNursingHomeDetail = () => {
  // 实际应用中，这里应该从API获取数据
  console.log('加载养老院详情，ID：', nursingHomeId.value);
  
  // 模拟API请求
  setTimeout(() => {
    // 实际应用中，这里应该用真实数据替换
    nursingHome.id = nursingHomeId.value;
  }, 500);
};

// 切换基本信息/入住条件标签
const switchInfoTab = (tab) => {
  activeInfoTab.value = tab;
};

// 切换费用信息标签
const switchFeeTab = (type) => {
  activeTabType.value = type;
};

// 查看更多评论
const viewMoreComments = () => {
  uni.navigateTo({
    url: `/pages/nursing-home-detail/comments?id=${nursingHomeId.value}`
  });
};

// 展开/收起评论
const toggleComment = (index) => {
  nursingHome.comments[index].expanded = !nursingHome.comments[index].expanded;
};

// 检查收藏状态
const checkFavoriteStatus = () => {
  // 实际应用中，这里应该从API或本地存储检查收藏状态
  const favorites = uni.getStorageSync('favorites') || [];
  isFavorite.value = favorites.includes(Number(nursingHomeId.value));
};

// 切换收藏状态
const toggleFavorite = () => {
  // 实际应用中，这里应该调用API来添加/取消收藏
  let favorites = uni.getStorageSync('favorites') || [];
  
  if (isFavorite.value) {
    // 取消收藏
    favorites = favorites.filter(id => id !== Number(nursingHomeId.value));
    uni.showToast({
      title: '已取消收藏',
      icon: 'none'
    });
  } else {
    // 添加收藏
    favorites.push(Number(nursingHomeId.value));
    uni.showToast({
      title: '已添加到收藏',
      icon: 'none'
    });
  }
  
  // 保存到本地存储
  uni.setStorageSync('favorites', favorites);
  
  // 更新收藏状态
  isFavorite.value = !isFavorite.value;
};

// 预约参观
const makeAppointment = () => {
  uni.navigateTo({
    url: `/pages/nursing-home-appointment/index?id=${nursingHomeId.value}&name=${encodeURIComponent(nursingHome.name)}&address=${encodeURIComponent(nursingHome.address)}`
  });
};

// 申请入住
const applyCheckin = () => {
  // 查询已存在的入住人列表
  let storedResidents = uni.getStorageSync('residents') || [];
  
  // 如果已有入住人，直接跳转到申请入住页面
  if (storedResidents.length > 0) {
    // 直接跳转到申请入住页面
    uni.navigateTo({
      url: `/pages/nursing-home-checkin/index?id=${nursingHomeId.value}&name=${encodeURIComponent(nursingHome.name)}&address=${encodeURIComponent(nursingHome.address)}`,
      success: function() {
        console.log('跳转成功');
      },
      fail: function(err) {
        console.error('跳转失败：', err);
        uni.showToast({
          title: '页面跳转失败',
          icon: 'none',
          duration: 3000
        });
      }
    });
  } else {
    // 如果没有入住人，则显示新增入住人弹窗
    showAddResident.value = true;
    // 重置新入住人数据
    Object.assign(newResident, {
      name: '',
      idCard: '',
      birthDate: '',
      gender: '男',
      phone: '',
      relation: '',
      relationCode: 0,
      avatar: ''
    });
  }
};

// 设置评分
const setRating = (rating) => {
  newComment.rating = rating;
};

// 提交评论
const submitComment = () => {
  if (!isCommentValid.value) {
    return uni.showToast({
      title: '评论内容至少5个字',
      icon: 'none'
    });
  }
  
  // 实际项目中应当调用API提交评论
  const username = uni.getStorageSync('userInfo')?.nickname || '游客';
  
  // 创建新评论对象
  const comment = {
    username,
    rating: newComment.rating,
    content: newComment.content,
    images: [...newComment.images], // 复制图片数组
    expanded: false,
    date: new Date()
  };
  
  // 将新评论添加到列表
  nursingHome.comments.unshift(comment);
  
  // 重置表单
  newComment.content = '';
  newComment.rating = 5;
  newComment.images = []; // 清空图片
  
  // 提示用户
  uni.showToast({
    title: '评论发布成功',
    icon: 'success'
  });
};

// 选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 3 - newComment.images.length,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      // 将选择的图片添加到评论图片列表中
      newComment.images = [...newComment.images, ...res.tempFilePaths];
    },
    fail: (err) => {
      console.error('选择图片失败', err);
      uni.showToast({
        title: '选择图片失败',
        icon: 'none'
      });
    }
  });
};

// 删除图片
const removeImage = (index) => {
  newComment.images.splice(index, 1);
};

// 预览评论图片
const previewCommentImage = (images, current) => {
  uni.previewImage({
    urls: images,
    current: images[current]
  });
};

// 处理出生日期变化
const handleBirthDateChange = (e) => {
  const value = e.detail.value;
  newResident.birthDate = value;
};

// 处理性别变化
const handleGenderChange = (e) => {
  const value = e.detail.value;
  newResident.gender = value;
};

// 处理关系变化
const handleRelationChange = (e) => {
  const value = e.detail.value;
  newResident.relation = value;
  newResident.relationCode = relationCodeMap[value] || 0;
};

// 选择头像
const chooseAvatar = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      newResident.avatar = res.tempFilePaths[0];
    },
    fail: (err) => {
      console.error('选择头像失败', err);
      uni.showToast({
        title: '选择头像失败',
        icon: 'none'
      });
    }
  });
};

// 关闭新增入住人弹窗
const closeAddResidentPopup = () => {
  showAddResident.value = false;
};

// 验证身份证号
const validateIdCard = (idCard) => {
  // 简单验证，实际应用中可以使用更复杂的验证规则
  const pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
  return pattern.test(idCard);
};

// 验证手机号
const validatePhone = (phone) => {
  // 简单验证，实际应用中可以使用更复杂的验证规则
  return /^1\d{10}$/.test(phone);
};

// 添加新入住人
const addNewResident = () => {
  // 表单验证
  if (!newResident.name) {
    return uni.showToast({
      title: '请输入姓名',
      icon: 'none'
    });
  }
  
  if (!newResident.idCard || !validateIdCard(newResident.idCard)) {
    return uni.showToast({
      title: '请输入有效的身份证号',
      icon: 'none'
    });
  }
  
  if (!newResident.birthDate) {
    return uni.showToast({
      title: '请选择出生日期',
      icon: 'none'
    });
  }
  
  if (!newResident.phone || !validatePhone(newResident.phone)) {
    return uni.showToast({
      title: '请输入有效的手机号',
      icon: 'none'
    });
  }
  
  if (!newResident.relation) {
    return uni.showToast({
      title: '请选择与账号关系',
      icon: 'none'
    });
  }
  
  // 生成新ID (实际应用中应该由后端生成)
  const newId = Date.now().toString();
  
  // 创建新入住人对象
  const resident = {
    id: newId,
    name: newResident.name,
    idCard: newResident.idCard,
    birthDate: newResident.birthDate,
    gender: newResident.gender,
    phone: newResident.phone,
    relation: newResident.relation,
    relationCode: newResident.relationCode,
    avatar: newResident.avatar || ''
  };
  
  // 保存到本地存储 (实际应用中应该提交到后端)
  try {
    let storedResidents = uni.getStorageSync('residents') || [];
    storedResidents.push(resident);
    uni.setStorageSync('residents', storedResidents);
    
    uni.showToast({
      title: '入住人添加成功，即将跳转申请页面',
      icon: 'success',
      duration: 2000
    });
    
    // 跳转到申请入住页面
    setTimeout(() => {
      console.log('正在跳转到申请入住页面，路径：', `/pages/nursing-home-checkin/index?id=${nursingHomeId.value}&name=${encodeURIComponent(nursingHome.name)}&address=${encodeURIComponent(nursingHome.address)}`);
      uni.navigateTo({
        url: `/pages/nursing-home-checkin/index?id=${nursingHomeId.value}&name=${encodeURIComponent(nursingHome.name)}&address=${encodeURIComponent(nursingHome.address)}`,
        success: function() {
          console.log('跳转成功');
        },
        fail: function(err) {
          console.error('跳转失败：', err);
          uni.showToast({
            title: '页面跳转失败：' + JSON.stringify(err),
            icon: 'none',
            duration: 3000
          });
        }
      });
    }, 2000);
    
    // 关闭新增弹窗
    closeAddResidentPopup();
  } catch(e) {
    console.error('保存入住人信息失败', e);
    uni.showToast({
      title: '保存失败，请重试',
      icon: 'none'
    });
  }
};
</script>

<style lang="scss">
.nursing-home-detail {
  min-height: 100vh;
  background-color: #f0f7f7;
  padding-bottom: 70px; /* 增加底部内边距，为两个按钮留出空间 */
  position: relative; /* 添加相对定位 */
  
  .detail-card {
    background-color: #fff;
    border-radius: 0 0 20px 20px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    
    .header-image-container {
      height: 200px;
      position: relative;
      
      .header-image {
        height: 100%;
        width: 100%;
        background-color: #eaeaea;
        display: flex;
        justify-content: center;
        align-items: center;
        
        text {
          color: #999;
        }
      }
      
      .image-gradient {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100px;
        background: linear-gradient(to bottom, transparent, rgba(195, 227, 227, 0.9));
      }
      
      // 收藏图标样式
      .favorite-icon {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 5;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        
        .iconfont {
          font-size: 24px;
          color: #999;
        }
        
        &.active {
          .iconfont {
            color: #ff9800;
          }
        }
        
        &:active {
          transform: scale(0.95);
        }
      }
      
      .title-rating {
        position: absolute;
        bottom: 15px;
        left: 15px;
        right: 15px;
        
        .name {
          font-size: 22px;
          font-weight: 600;
          color: #2c7873;
          display: block;
          margin-bottom: 5px;
        }
        
        .rating {
          display: flex;
          align-items: center;
          
          .stars {
            color: #ddd;
            font-size: 16px;
            
            .active {
              color: #2c7873;
            }
          }
          
          .rating-text {
            font-size: 14px;
            color: #2c7873;
            margin-left: 5px;
          }
        }
      }
    }
  }
  
  // 信息区域
  .info-sections {
    // 选项卡式信息区块
    .info-tabs-section {
      margin-bottom: 15px;
      
      .tabs-header {
        display: flex;
        border-bottom: 1px solid #e0e0e0;
        margin-bottom: 15px;
        
        .tab-item {
          flex: 1;
          text-align: center;
          padding: 12px 0;
          font-size: 15px;
          color: #666;
          position: relative;
          
          &.active {
            color: #333;
            font-weight: 600;
            
            &:after {
              content: '';
              position: absolute;
              bottom: -1px;
              left: 50%;
              transform: translateX(-50%);
              width: 30px;
              height: 2px;
              background-color: #c3e3e3;
            }
          }
          
          &:first-child {
            border-right: 1px solid #e0e0e0;
          }
        }
      }
      
      .tab-content {
        padding: 5px 0;
        
        .info-row {
          display: flex;
          margin-bottom: 15px;
          
          .info-label {
            width: 80px;
            font-size: 14px;
            color: #666;
          }
          
          .info-value {
            flex: 1;
            font-size: 14px;
            color: #333;
          }
        }
        
        .admission-item {
          font-size: 14px;
          color: #333;
          margin-bottom: 10px;
          line-height: 1.5;
        }
      }
    }
    
    // 卡片式区块
    .card-section {
      background-color: #fff;
      border-radius: 15px;
      border: 1px solid #e0e0e0;
      padding: 15px;
      margin-bottom: 15px;
    }
    
    // 通用区块头部样式
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid #e0e0e0;
      
      .more-btn {
        font-size: 14px;
        color: #666;
      }
    }
    
    // 收费信息区域
    .fee-section {
      .section-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 15px;
      }
      
      .fee-tabs {
        display: flex;
        border-bottom: 1px solid #e0e0e0;
        margin-bottom: 15px;
        
        .tab-item {
          padding: 10px 15px;
          font-size: 14px;
          color: #666;
          position: relative;
          
          &.active {
            color: #333;
            font-weight: 600;
            
            &:after {
              content: '';
              position: absolute;
              bottom: -1px;
              left: 0;
              right: 0;
              height: 2px;
              background-color: #c3e3e3;
            }
          }
        }
      }
      
      .fee-table {
        .table-header, .table-row {
          display: flex;
          border-bottom: 1px solid #e0e0e0;
          
          .col {
            flex: 1;
            padding: 10px 5px;
            font-size: 14px;
            text-align: center;
          }
        }
        
        .table-header {
          font-weight: 600;
          color: #333;
        }
        
        .table-row {
          color: #333;
          
          &:last-child {
            border-bottom: none;
          }
        }
      }
    }
    
    // 特色服务区域
    .services-section {
      .section-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 15px;
      }
      
      .services-scroll {
        width: 100%;
        white-space: nowrap;
      }
      
      .services-list {
        display: inline-flex;
        padding-bottom: 10px;
        
        .service-item {
          width: 150px;
          margin-right: 10px;
          border-radius: 8px;
          overflow: hidden;
          border: 1px solid #e0e0e0;
          flex-shrink: 0;
          
          .service-icon {
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f5f5f5;
            font-size: 14px;
            color: #666;
          }
          
          .service-name {
            padding: 10px;
            font-size: 14px;
            font-weight: 600;
            color: #333;
            text-align: center;
          }
          
          .service-desc {
            padding: 0 10px 10px;
            font-size: 12px;
            color: #666;
            text-align: center;
            line-height: 1.4;
            white-space: normal;
            height: 50px;
            overflow: hidden;
          }
        }
      }
    }
    
    // 精彩活动区域
    .activities-section {
      .section-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 15px;
      }
      
      .activities-scroll {
        width: 100%;
        white-space: nowrap;
      }
      
      .activities-list {
        display: inline-flex;
        padding-bottom: 10px;
        
        .activity-item {
          width: 180px;
          margin-right: 12px;
          border-radius: 8px;
          overflow: hidden;
          border: 1px solid #e0e0e0;
          flex-shrink: 0;
          box-shadow: 0 2px 6px rgba(0,0,0,0.05);
          
          .activity-image {
            height: 120px;
            overflow: hidden;
            
            .activity-img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
          
          .activity-name {
            padding: 10px;
            font-size: 14px;
            font-weight: 600;
            color: #333;
            text-align: center;
          }
          
          .activity-desc {
            padding: 0 10px 10px;
            font-size: 12px;
            color: #666;
            text-align: center;
            line-height: 1.4;
            white-space: normal;
            height: 50px;
            overflow: hidden;
          }
        }
      }
    }
    
    // 用户评论区域
    .comments-section {
      .section-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
      }
      
      // 添加评论区域样式
      .add-comment-section {
        margin: 15px 0;
        padding: 15px;
        background-color: #f9f9f9;
        border-radius: 10px;
        border: 1px solid #e0e0e0;
        
        .rating-input {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          
          .rating-label {
            font-size: 14px;
            color: #333;
            margin-right: 10px;
          }
          
          .stars-input {
            font-size: 20px;
            color: #ddd;
            
            text {
              margin-right: 5px;
              cursor: pointer;
              
              &.active {
                color: #ff9800;
              }
            }
          }
        }
        
        .comment-textarea {
          width: 100%;
          height: 100px;
          padding: 10px;
          border: 1px solid #e0e0e0;
          border-radius: 5px;
          font-size: 14px;
          background-color: #fff;
          margin-bottom: 5px;
          box-sizing: border-box;
        }
        
        // 图片上传区域样式
        .upload-section {
          margin-bottom: 10px;
          
          .image-preview-list {
            display: flex;
            flex-wrap: wrap;
            
            .image-preview-item {
              width: 80px;
              height: 80px;
              margin-right: 10px;
              margin-bottom: 10px;
              position: relative;
              border-radius: 4px;
              overflow: hidden;
              
              .preview-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
              
              .delete-icon {
                position: absolute;
                top: -2px;
                right: -2px;
                width: 20px;
                height: 20px;
                background-color: rgba(0, 0, 0, 0.5);
                color: #fff;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 16px;
              }
            }
            
            .upload-btn {
              width: 80px;
              height: 80px;
              border: 1px dashed #ccc;
              border-radius: 4px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              background-color: #f9f9f9;
              
              .plus-icon {
                font-size: 24px;
                color: #8d6e63;
                margin-bottom: 5px;
              }
              
              .upload-text {
                font-size: 12px;
                color: #8d6e63;
              }
            }
          }
          
          .upload-tips {
            font-size: 12px;
            color: #999;
            margin-top: 5px;
          }
        }
        
        .textarea-counter {
          text-align: right;
          font-size: 12px;
          color: #999;
          margin-bottom: 10px;
        }
        
        .submit-btn {
          background-color: #6FB3B8;
          color: #fff;
          text-align: center;
          padding: 10px 0;
          border-radius: 5px;
          font-size: 14px;
          font-weight: 500;
          opacity: 0.6;
          
          &.active {
            opacity: 1;
          }
        }
      }
      
      .comment-list {
        .comment-item {
          padding: 15px 0;
          border-bottom: 1px solid #e0e0e0;
          
          &:last-child {
            border-bottom: none;
          }
          
          .comment-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            
            .user-info {
              display: flex;
              align-items: center;
              
              .avatar {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background-color: #e0e0e0;
                margin-right: 10px;
              }
              
              .user-name {
                font-size: 14px;
                font-weight: 600;
                color: #333;
              }
            }
            
            .rating {
              flex: 1;
              display: flex;
              justify-content: center;
              
              .stars {
                color: #ff9800;
                font-size: 14px;
              }
            }
            
            .expand-btn {
              padding: 2px 8px;
              font-size: 12px;
              color: #666;
              border: 1px solid #e0e0e0;
              border-radius: 10px;
              background-color: #f5f5f5;
            }
          }
          
          .comment-content {
            font-size: 14px;
            color: #333;
            line-height: 1.6;
            margin-bottom: 10px;
            max-height: 60px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            white-space: normal;
            
            &.expanded {
              max-height: none;
              -webkit-line-clamp: unset;
            }
          }
          
          // 添加评论图片展示
          .comment-images {
            display: flex;
            flex-wrap: wrap;
            margin: 10px 0;
            
            .image-item {
              width: 70px;
              height: 70px;
              margin-right: 8px;
              margin-bottom: 8px;
              border-radius: 4px;
              overflow: hidden;
              
              image {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }
          }
          
          .similar-homes {
            margin-top: 15px;
            padding-top: 10px;
            border-top: 1px dashed #e0e0e0;
            
            .homes-list {
              display: flex;
              margin-top: 8px;
              
              .home-item {
                width: 80px;
                height: 80px;
                background-color: #e0e0e0;
                margin-right: 10px;
                border-radius: 8px;
              }
            }
          }
        }
      }
    }
  }
  
  // 底部操作按钮
  .floating-actions {
    position: fixed;
    bottom: 15px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding: 0 15px;
    z-index: 100;
    box-sizing: border-box;
    
    .action-btn {
      flex: 1;
      height: 46px;
      border-radius: 23px;
      margin: 0 8px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
      
      .btn-inner {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .action-icon {
          font-size: 18px;
          margin-right: 6px;
        }
        
        .action-text {
          font-size: 15px;
          font-weight: 600;
        }
      }
      
      &.appointment-btn {
        background-color: #6FB3B8;
        
        .action-icon,
        .action-text {
          color: #fff;
        }
      }
      
      &.checkin-btn {
        background-color: #2c7873;
        
        .action-icon,
        .action-text {
          color: #fff;
        }
      }
      
      &:active {
        transform: scale(0.95);
        
        .ripple {
          background-color: rgba(255, 255, 255, 0.3);
          transform: scale(2);
          opacity: 0;
        }
      }
    }
  }
  
  // 新增入住人弹窗样式
  .add-resident-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .popup-mask {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1;
    }
    
    .popup-content {
      width: 85%;
      max-width: 340px;
      background-color: #fff;
      border-radius: 12px;
      z-index: 2;
      position: relative;
      overflow: hidden;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
      animation: popup-in 0.3s ease-out;
      
      @keyframes popup-in {
        0% {
          opacity: 0;
          transform: scale(0.9);
        }
        100% {
          opacity: 1;
          transform: scale(1);
        }
      }
    }
    
    .popup-header {
      padding: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f0f0f0;
      
      .popup-title {
        font-size: 18px;
        font-weight: 600;
        color: #333;
      }
      
      .close-btn {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .iconfont {
          font-size: 20px;
          color: #999;
        }
      }
    }
    
    .popup-body {
      padding: 16px;
      max-height: 60vh;
      overflow-y: auto;
      
      .form-item {
        margin-bottom: 16px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .form-label {
          font-size: 15px;
          font-weight: 500;
          color: #333;
          margin-bottom: 8px;
          display: block;
          
          &.required:after {
            content: '*';
            color: #ff6b6b;
            margin-left: 4px;
          }
        }
        
        .form-input {
          width: 100%;
          height: 46px;
          background-color: #f8fbfb;
          border-radius: 8px;
          padding: 0 15px;
          font-size: 15px;
          color: #333;
          border: 1px solid #e6eaea;
          box-sizing: border-box;
        }
        
        .form-picker {
          width: 100%;
          height: 46px;
          background-color: #f8fbfb;
          border-radius: 8px;
          padding: 0 15px;
          font-size: 15px;
          color: #333;
          border: 1px solid #e6eaea;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          position: relative;
          
          &:after {
            content: '\e65a';
            font-family: 'iconfont';
            position: absolute;
            right: 15px;
            font-size: 14px;
            color: #999;
          }
          
          .picker-value {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            
            text {
              color: #333;
              
              &:empty:before {
                content: attr(data-placeholder);
                color: #999;
              }
            }
          }
        }
        
        .form-radio-group {
          display: flex;
          
          .radio-item {
            display: flex;
            align-items: center;
            margin-right: 30px;
            
            .radio-text {
              font-size: 15px;
              color: #333;
              margin-left: 4px;
            }
          }
        }
        
        .avatar-uploader {
          width: 80px;
          height: 80px;
          border-radius: 8px;
          border: 1px dashed #ddd;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          
          .avatar-image {
            width: 100%;
            height: 100%;
          }
          
          .avatar-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            
            .iconfont {
              font-size: 24px;
              color: #999;
              margin-bottom: 6px;
            }
            
            .upload-text {
              font-size: 12px;
              color: #999;
            }
          }
        }
      }
    }
    
    .popup-footer {
      display: flex;
      border-top: 1px solid #f0f0f0;
      
      .popup-btn {
        flex: 1;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 500;
        
        &:active {
          opacity: 0.8;
        }
      }
      
      .cancel-btn {
        color: #666;
        background-color: #f5f5f5;
      }
      
      .confirm-btn {
        color: #fff;
        background-color: #2c7873;
      }
    }
  }
}
</style> 